<script setup lang="ts">
import { reactive, ref, computed } from 'vue'
import TabBar from '@/components/tabbar/index.vue'
//引入modelitem组件
import ModelItem from './components/modelitem.vue'

import { onLoad, onShow } from '@dcloudio/uni-app'
import Auth from '@/components/auth/auth.vue'
import { doGetShopBalance } from '@/apis/finance/index'
import { getshopinfo } from '@/apis/mall/settings/index'
import { useShopInfoStore } from '@/store/modules/shopInfo'
import { useUserStore } from '@/store/modules/user/index'
import { doPostLogout } from '@/apis/sign'
import { useScrollViewHeight } from '@/hooks'

// 可视区域滑动高度计算
const { scrollViewHeight } = useScrollViewHeight()

const shopInfoStore = useShopInfoStore()
const UserStore = useUserStore()
const shopInfo = reactive({
    name: '',
    logo: '',
    undrawn: '',
    withdrawalTotal: '',
})

//传入订单管理的参数
const ordermodel = reactive({
    name: 'dingdan',
    color: '#4755E9',
    title: '订单管理',
    router: '/order',
    bccolor: 'rgba(225, 233, 253, 1)',
})
//传入商品管理的参数
const goodsmodel = reactive({
    name: 'shangpin',
    color: '#59D0FB',
    title: '商品管理',
    router: '/goods',
    bccolor: 'rgba(219, 245, 255, 1)',
})
//传入商家配送(配送订单)的参数
const deliveryOrderModel = reactive({
    name: 'peisong01_peisong',
    color: '#59D0FB',
    title: '商家配送(配送订单)',
    router: '/goods',
    bccolor: 'rgba(219, 245, 255, 1)',
})

onLoad(async () => {
    uni.$emit('updateTitle')
    handleGetShopData()
    handleGetShopInfo()
})
onShow(async () => {
    await handleGetShopData()
    await handleGetShopInfo()
})

/**
 * 点击跳转 改变商铺信息
 */
const handleChangeReviseShop = () => {
    uni.navigateTo({
        url: '/basePackage/pages/reviseShop/index',
    })
    console.log('点击改变商铺信息')
}
const handleChangeShop = () => {
    uni.navigateTo({
        url: '/basePackage/pages/changeShop/index',
    })
}
/**
 * 跳转到订单管理
 */
const handleToOrder = () => {
    uni.navigateTo({
        url: '/basePackage/pages/ordertSystem/index',
    })
    console.log('跳转到订单管理')
}
/**
 * 跳转到商品管理
 */
const handleToShops = () => {
    uni.navigateTo({
        url: '/basePackage/pages/shopsSystemone/index',
    })
    console.log('跳转到商品管理')
}
/**
 * 跳转到配送订单
 */
const handleToDelivery = () => {
    uni.navigateTo({
        url: '/basePackage/pages/deliveryOrder/index',
    })
    console.log('跳转到配送订单')
}
/**
 *  退出登录
 */
const handleBack = () => {
    uni.showModal({
        title: '提示',
        content: '确定退出登录吗？',
        success: (res) => {
            if (res.confirm) {
                shopInfoStore.DEL_SHOP_INFO()
                UserStore.DEL_TOKEN()
                uni.reLaunch({
                    url: '/pages/sign/index',
                })
                doPostLogout()
            } else if (res.cancel) {
                console.log('用户点击取消')
            }
        },
    })
}
//获取店铺信息
const handleGetShopData = async () => {
    const data = await doGetShopBalance()
    console.log(data)
    shopInfo.undrawn = data.data.undrawn
    shopInfo.withdrawalTotal = data.data.withdrawalTotal
}
//发送请求获取商铺基本信息
const handleGetShopInfo = async () => {
    const data = await getshopinfo()
    if (data.code !== 200) {
        return uni.showToast({
            title: data.msg,
            icon: 'none',
        })
    }
    shopInfo.name = data.data.name
    if (shopInfo.logo !== data.data.logo) {
        shopInfo.logo = data.data.logo
    }
}
const showPopup = ref(false)
</script>

<template>
    <scroll-view :scroll-y="true" :style="{ height: `${scrollViewHeight}` }">
        <view class="content" @click="showPopup = false">
            <Auth></Auth>
            <!-- 修改店铺按钮 -->
            <view class="content__top">
                <view class="content__revise">
                    <view class="content__revise--btn" @click.stop="showPopup = true">
                        <u-icon class="fill" name="more-dot-fill" color="#475777" size="48"></u-icon>
                        <view v-if="showPopup" class="popup">
                            <text class="popup__option" @click.stop="handleChangeReviseShop">店铺设置</text>
                            <text class="popup__option" @click.stop="handleChangeShop">店铺切换</text>
                        </view>
                    </view>
                </view>
                <!-- 店铺头像 -->
                <view class="content__avatar">
                    <view class="content__avatar--img"><u-avatar :src="shopInfo.logo" mode="square" size="166"></u-avatar></view>
                    <view class="content__avatar--name">{{ shopInfo.name }}</view>
                </view>
            </view>
            <view class="content__bottom">
                <!-- 店铺资产 -->
                <view class="account">
                    <view class="account__title">账户资产</view>
                    <view class="account__item">
                        <view class="account__item--left">
                            <view class="account__item--top">店铺余额</view>
                            <view class="account__item--bottom">{{ (Number(shopInfo.undrawn) / 10000).toFixed(2) }}</view>
                        </view>
                        <view class="account__item--left">
                            <view class="account__item--top">累计提现</view>
                            <view class="account__item--bottom">{{ (Number(shopInfo.withdrawalTotal) / 10000).toFixed(2) }}</view>
                        </view>
                    </view>
                </view>
                <view class="bottom">
                    <view class="abottom">
                        <!-- <view style="height: 20rpx"></view> -->
                        <!-- 模块部分 -->
                        <view class="abottom__order">
                            <ModelItem :option="ordermodel" @click="handleToOrder"></ModelItem>
                            <ModelItem :option="goodsmodel" @click="handleToShops"></ModelItem>
                            <ModelItem :option="deliveryOrderModel" @click="handleToDelivery"></ModelItem>
                        </view>
                        <!-- 退出登录按钮 -->
                        <view class="abottom__order"><view class="abottom__exit" @click="handleBack">退出登录</view></view>
                    </view>
                </view>
            </view>
        </view>
    </scroll-view>

    <TabBar></TabBar>
    <Auth></Auth>
</template>

<style lang="scss" scoped>
@include b(fill) {
    //图标旋转90度
    transform: rotate(90deg);
}

@include b(content) {
    display: flex;
    flex-direction: column;
    @include e(bottom) {
        margin-top: 20rpx;
        background-color: rgba(252, 252, 252, 1);
        border-radius: 50rpx 50rpx 0 0;
        padding: 50rpx 0;
        padding-bottom: 30rpx;
    }
    @include e(revise) {
        height: 50rpx;
        display: flex;
        justify-content: flex-end;
        @include m(btn) {
            width: 84rpx;
            height: 84rpx;
            line-height: 84rpx;
            border-radius: 20rpx;
            background-color: rgba(255, 255, 255, 1);
            text-align: center;
            margin-top: 26rpx;
            margin-right: 42rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
    }
    @include e(avatar) {
        display: flex;
        flex-direction: column;
        height: 260rpx;
        align-items: center;
        @include m(img) {
            width: 166rpx;
            border-radius: 62rpx;
            overflow: hidden;
            margin-bottom: 34rpx;
        }
        @include m(name) {
            font-size: 32rpx;
            font-weight: 700;
            color: #101010;
        }
    }
}
@include b(account) {
    // position: absolute;
    // left: 27px;
    // top: 233px;
    width: 636rpx;
    height: 280rpx;
    border-radius: 36rpx;
    background-color: rgba(71, 85, 233, 1);
    // z-index: 99999;
    margin: 50rpx 36rpx 80rpx 54rpx;
    padding: 42rpx 24rpx 28rpx 46rpx;
    @include e(title) {
        height: 46rpx;
        color: rgba(255, 255, 255, 1);
        font-size: 28rpx;
        font-weight: 700;
    }
    @include e(item) {
        display: flex;
        justify-content: space-between;
        margin-top: 56rpx;

        @include m(top) {
            color: rgba(212, 216, 255, 1);
            font-size: 24rpx;
            margin-bottom: 6rpx;
        }
        @include m(bottom) {
            color: rgba(255, 255, 255, 1);
            font-size: 40rpx;
            font-weight: 500;
        }
    }
}
@include b(abottom) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    // padding-top: 204rpx;
    @include e(order) {
        padding: 0 36rpx 0 54rpx;
    }
    @include e(exit) {
        width: 660rpx;
        height: 110rpx;
        line-height: 110rpx;
        border-radius: 22rpx;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        box-shadow: 0 4rpx 22rpx 0 rgba(246, 246, 246, 100);
        font-size: 28rpx;
        text-align: center;
        font-family: Arial;
    }
}
@include b(popup) {
    position: absolute;
    top: 100rpx;
    right: 0;
    width: 180rpx;
    box-sizing: border-box;
    height: 145rpx;
    border-radius: 6rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #333;
    font-size: 28rpx;
    background-color: #fff;
    @include e(option) {
        line-height: 64rpx;
    }
}
</style>
